<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/jsp/declare.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath %>" />
	<%-- <meta http-equiv="refresh" content="0; url=<%=basePath %>mvc/renter/communityList.htm?fromUserName=${param.fromUserName }" /> --%>
	<title>修改手机号-房客</title>
	<%@ include file="/common/jsp/common.jsp" %>

	<script>
	var canClick = true;// 能否点的标识
	var thisSecond = 0;// 开始秒数
	var secondToEnable = 180;// 多少秒后可以重新点击
	function getCode(dom) {
		if (!canClick)
			return;

		var oldUserPhone = $.trim($("#oldUserPhone").val());
		var userPhone = $.trim($("#userPhone").val());
		if (!oldUserPhone || !validatePhone(oldUserPhone)) {
			jAlert("请输入正确的原手机号");
			return;
		}
		if (!userPhone || !validatePhone(userPhone)) {
			jAlert("请输入正确的新手机号");
			return;
		}
		canClick = false;
		doAjax({
			url: "mvc/main/getCode.htm",
			data: {
				phone: userPhone
			},
			success: function(json) {
				if(json == true) {
					jAlert("验证码发送成功。");
					$(dom).addClass("but-disable");
					intervalToClick(dom);
				} else if (json != false) {
					jAlert(json);
					canClick = true;
				} else {
					jAlert("验证码发送失败，请稍后再试。");
					canClick = true;
				}
			},
			error: function(json) {
				canClick = true;
			}
		});
	}
	function intervalToClick(dom) {
		if (thisSecond < secondToEnable) {
			$(dom).attr("value", secondToEnable - thisSecond++ + "秒后重发");
			window.setTimeout(function(){
				intervalToClick(dom);
			}, 1000);
		} else {
			$(dom).attr("value", "获取验证码");
			thisSecond = 0;
			canClick = true;
			$(dom).removeClass("but-disable");
		}
	}
	
	function updatePhone() {
		var oldUserPhone = $.trim($("#oldUserPhone").val());
		var userPhone = $.trim($("#userPhone").val());
		var code = $("#code").val();
		if (!oldUserPhone || !validatePhone(oldUserPhone)) {
			jAlert("请输入正确的原手机号");
			return;
		}
		if (!userPhone || !validatePhone(userPhone)) {
			jAlert("请输入正确的新手机号");
			return;
		}
		if (!validateCode(code)) {
			jAlert("验证码格式不正确");
			return false;
		}

		doAjax({
			url: addFromUserName("mvc/renter/wxUpdateCPhone.json"),
			data: {
				phone: oldUserPhone,
				newPhone: userPhone,
				code: code
			},
			success: function(json){
				if (json && json.msg){
					jAlert(json.msg);
				}
			}
		});
	}
	</script>
</head>
<body class="frame bgcolor">
	<div class="center">
		<div class="logo">
			<img src="aizu/images/logo.jpg" />
		</div>
		<h1 class="name">房客修改手机号</h1>

		<div class="row">
			<input type="text" id="oldUserPhone" name="oldUserPhone" value="" placeholder="请输入旧手机号" maxlength="11" class="input" />
		</div>
		<div class="row">
			<input type="text" id="userPhone" name="userPhone" value="" placeholder="请输入新手机号" maxlength="11" class="input" />
		</div>
		<div class="row">
			<input type="button" value="获取验证码" class="getCodeBut fr" onclick="getCode(this)" />
			<div class="verificationCodeFixed">
				<input type="text" id="code" name="code" placeholder="请输入验证码" class="verificationCode" />
			</div>
		</div>
		<div class="row">
			<input type="submit" value="确认手机号" class="register" onclick="updatePhone()" />
		</div>
	</div>
</body>
</html>
